<template>
    <div>
        <el-form ref="form" :model="formData" label-width="80px" :inline="true">
            <el-form-item>
                <el-button type="warning" :disabled="multipleSelection.length == 0" @click="clickMultiUpdatePaymentPhone(2)">批量上架</el-button>
                <el-button type="danger" :disabled="multipleSelection.length == 0" @click="clickMultiUpdatePaymentPhone(1)">批量下架</el-button>

                <el-button type="success" @click="$refs.insertAnnouncementRefs.show()">插入公告</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTableRefs" :data="tableData" v-loading="loading" @selection-change="handleSelectionChange" :row-key="getRowKey">
            <el-table-column type="selection" :reserve-selection="true" width="60"></el-table-column>
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="Title" label="标题" width="250"> </el-table-column>
            <el-table-column prop="Status" label="状态" width="80">
                <template #default="scope">
                    <div>
                        {{ Status[scope.row.Status]?.text }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Content" label="语言" width="120">
                <template #default="scope">
                    <div>
                        {{ languageList[scope.row.LanguageId] }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Content" label="内容" min-width="300">
                <template #default="scope">
                    <div class="Content">
                        {{ scope.row.Content?.substring(0, 200) }}...
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="CreatedAt" label="创建时间" width="150">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <!-- <el-button
            type="warning"
            size="small"
            @click="$refs.updatePayment.show(scope.row)"
            >处理</el-button
          > -->
                    <el-button type="success" size="small" @click="$refs.insertAnnouncementRefs.show(scope.row)">更新</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
        <insertAnnouncement ref="insertAnnouncementRefs" :languageList="languageList" @load="onSubmit" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { getAllAnnouncement, setAnnouncementStatus } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
    setup() {
        const multipleTableRefs = ref();
        const loading = ref(false);
        const tableData = ref([]);
        const formData = reactive({
            pageNum: 0,
            pageSize: 20,
            total: 0,
        });
        const multipleSelection = ref([]);
        const languageList = ref([
            "英语",
            "中文简体",
            "中文繁体",
            "韩语",
            "日语",
            "泰语",
            "阿拉伯语",
        ]);
        const Status = ref([
            {
                statu: 0,
                text: "未上架",
            },
            {
                statu: 1,
                text: "下架",
            },
            {
                statu: 2,
                text: "上架",
            },
        ]);
        const getRowKey = (row) => {
            return row.Id;
        };
        const handleSelectionChange = (val) => {
            multipleSelection.value = val;
        };
        const onSubmit = async () => {
            loading.value = true;
            try {
                const res = await getAllAnnouncement(formData);
                tableData.value = res.data.data.AnnouncementList;
                formData.total = res.data.data.Total;
            } catch (error) {}
            loading.value = false;
        };
        const handleSizeChange = (val) => {
            formData.pageSize = val;
            formData.pageNum = 0;
            onSubmit();
        };
        const handleCurrentChange = (val) => {
            formData.pageNum = val - 1;
            onSubmit();
        };
        const clickMultiUpdatePaymentPhone = (status) => {
            ElMessageBox.confirm("批量操作，是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                beforeClose: async (action, instance, done) => {
                    if (action === "confirm") {
                        try {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "执行中...";
                            await setAnnouncementStatus({
                                ids: multipleSelection.value
                                    .map((item) => item.Id)
                                    .join(","),
                                status: status,
                            });
                            done();
                            instance.confirmButtonLoading = false;
                        } catch (error) {
                            instance.confirmButtonLoading = false;
                            instance.confirmButtonText = "确认";
                            ElMessage.error(error);
                        }
                    } else {
                        done();
                    }
                },
            })
                .then(() => {
                    multipleTableRefs.value.clearSelection();
                    multipleSelection.value = [];
                    ElMessage.success("成功");
                    onSubmit();
                })
                .catch(() => {});
        };
        onMounted(() => {
            onSubmit();
        });
        return {
            multipleTableRefs,
            loading,
            tableData,
            formData,
            multipleSelection,
            languageList,
            Status,
            getRowKey,
            handleSelectionChange,
            onSubmit,
            handleSizeChange,
            handleCurrentChange,
            clickMultiUpdatePaymentPhone,
        };
    },
});
</script>

<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}
</style>
